<template>
  <div class="kucunJiLu">
    <div class="mainCon">
      <div class="containercontent">
        <div class="seachTip selectw100">
          <div class="inlineblock verticalmiddle infoitem">
            <div class="inlineblock verticalmiddle" style="width:50px;text-align:right">
              类型
            </div>
            <div class="inlineblock verticalmiddle informationItem">

              <el-cascader clearable @change="cascaderChange" expand-trigger="hover" :options="enableMaterTypeList" v-model="selectedOptions2"
                size="mini" style="width:100%;">
              </el-cascader>
            </div>
          </div>
          <div class="inlineblock verticalmiddle infoitem">
            <div class="inlineblock verticalmiddle">
              名称
            </div>
            <div class="inlineblock verticalmiddle informationItem">
              <el-input style="" v-model="stockdetListParams.materialName" size="mini" placeholder="物资名称" clearable @keyup.enter.native="doSearch"></el-input>
            </div>
          </div>
          <div class="inlineblock verticalmiddle infoitem">
            <div class="inlineblock verticalmiddle">
              时间范围
            </div>
            <div class="inlineblock verticalmiddle informationItem">
              <el-date-picker clearable v-model="shijianfanwei" type="daterange" value-format="yyyy-MM-dd" size="mini" range-separator="-"
                start-placeholder="开始日期" end-placeholder="结束日期" @change="doSearch">
              </el-date-picker>
            </div>
          </div>


        </div>
        <div class="seachTip selectw100">
          <div class="inlineblock verticalmiddle infoitem">
            <div class="inlineblock verticalmiddle" style="width:50px;text-align:right">
              出/入库
            </div>
            <div class="inlineblock verticalmiddle informationItem">
              <el-select v-model="stockdetListParams.inoutflag" placeholder="请选择" size="mini" clearable @change="doSearch">
                <el-option v-for="item in churukustatus" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="inlineblock verticalmiddle infoitem">
            <div class="inlineblock verticalmiddle">
              批号
            </div>
            <div class="inlineblock verticalmiddle informationItem">
              <el-input style="" v-model="stockdetListParams.batch" size="mini" placeholder="批号" clearable @keyup.enter.native="doSearch"></el-input>
            </div>
          </div>

          <div class="inlineblock verticalmiddle infoitem">
            <el-button type="warning" size="mini" @click="doSearch">搜索</el-button>
            <el-button type="warning" size="mini" @click="emptySearch">清空</el-button>
          </div>
        </div>
        <div class="separaterowTable">
          <div class="tableTittle">
            <div style="width:96px;"><span class="fontImpact">1</span><span>出入库记录</span></div>
            <el-button type="primary" size="mini" style="float: right;" @click="exportStockdet" v-if="userOpernation.export.display">导出</el-button>
            <div style="float: right;">
              汇总: {{tableData6.totalQty== undefined?0:tableData6.totalQty}}
            </div>

          </div>
          <!--<el-row style="width: 100%;padding-left:15px">

          </el-row>-->
          <el-table :data="tableData6.stockdetBeanList" :cell-class-name="cellclassnamefunction" size='mini' style="width: 100%;height:calc(100% - 86px);"
            class="tableCon">
            <el-table-column label="序号" min-width="80px" fixed>
              <template slot-scope="scope">
                {{scope.$index+(readQuery.page - 1) * readQuery.pageCount + 1}}
              </template>
            </el-table-column>
            <el-table-column prop="certificateNumber" min-width="135" fixed label="证书序号" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="number" show-overflow-tooltip min-width="120" fixed label="物资编号">
            </el-table-column>
            <el-table-column prop="materialName" min-width="90" show-overflow-tooltip fixed label="物资名称">
            </el-table-column>
            <el-table-column prop="materialTypeName" label="物资类型" min-width="120" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="batch" min-width="110" show-overflow-tooltip label="批号">
            </el-table-column>
            <el-table-column prop="purity" label="标准值"  min-width="90" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="concentration" label="不确定值" min-width="90" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="validitydate" min-width="90" label="有效期" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="stockCode" min-width="135" label="存放位置" show-overflow-tooltip>
            </el-table-column>
            <!-- <el-table-column prop="inoutflag" min-width="90" label="出/入库">
              <template slot-scope="scope">
                {{scope.row.inoutflag==1?'入库':(scope.row.inoutflag==-1?'出库':(scope.row.inoutflag==0?'调整':""))}}
              </template>
            </el-table-column> -->
            <el-table-column prop="qty" min-width="100" label="数量">
              <template slot-scope="scope">
                {{scope.row.inoutflag==-1?'-':''}}{{scope.row.qty}}
              </template>
            </el-table-column>
            <el-table-column prop="internalNumber" label="内部编号" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="spce" label="物资规格" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="medium" label="介质" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="fixedValueDate" min-width="100" label="定值日期" :formatter="formatterTime">
            </el-table-column>
            <el-table-column prop="companyCode" min-width="100" label="生产厂家" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="storageTemperature" label="保存温度" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="unit" label="单位" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="createTime" min-width="100" label="操作日期" :formatter="formatterTime">
            </el-table-column>
            <el-table-column prop="inoutflag" label="出入库" :formatter="formatterStatus">
            </el-table-column>
            <el-table-column prop="remark" label="备注" :formatter="formatter">
            </el-table-column>
            <!-- <el-table-column prop="createByName" min-width="80" label="申请人" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="approveName" min-width="80" label="审批人" :formatter="formatter">
            </el-table-column> -->
          </el-table>
          <div class="block changepages">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="readQuery.page" :page-sizes="[20, 30, 40]"
              :page-size="readQuery.pageCount" layout="total, sizes, prev, pager, next, jumper" :total="rowNumber">
            </el-pagination>
            <!--<p class="total">
		        	总量
		        </p>-->
          </div>
        </div>

      </div>

    </div>

  </div>
</template>

<script>
  import { mapState } from 'vuex'


  export default {
    data() {
      return {
        supplierData: [],
        enableStatusValue: '',
        searchName: '',
        currentPage: 1,
        materialTypeValue: '',
        churuku: [
          {
            value: '出库'
          },
          {
            value: '入库'
          },
          {
            value: '出入库'
          }
        ],
        churukuValue: '',
        options: [],
        selectedOptions2: [],
        tableData6: [],
        pageinfo: {},
        stockdetListParams: {
          startDate: '',
          endDate: '',
          materialType: '',
          batch: '',
          inoutflag: '',
          materialName: '',

        },
        readQuery: {
          page: 1,
          pageCount: 20
        },
        firstleixingindex: 0,
        leixingnum: 0,
        firstwupinindex: 0,
        wupinnum: 0,
        firstbaozhuangindex: 0,
        baozhuangnum: 0,
        churukustatusValue: '',
        churukustatus: [
          {
            value: -1,
            label: '出库'
          },
          {
            value: 1,
            label: '入库'
          },
          {
            value: 0,
            label: '调整'
          },
        ],
        shijianfanwei: '',
        rowNumber: 0,
      }
    },
    computed: {
      tabDivHeight() {
        return (window.innerHeight - 340)
      },
      ...mapState(['enableStatus', 'tableHeightB', 'typeofAbilityTableDate', 'materialType', 'enableMaterTypeList']),
    },
    mounted() {
      this.readSupplier()
    },
    props: ['userOpernation'],
    watch: {
      readQuery: {
        handler(val, oldVal) {
          this.readStockdetList()
        },
        deep: true
      },
    },
    methods: {
      // 处理出入库
      formatterStatus(row, column, cellValue, index) {
        let obj = cellValue == 1 ? '入库' : cellValue == -1 ? '出库' : '---';
        return obj;
      },
      // 获取生产商
      readSupplier(){
        this.$http({
          apiUrl: 'resource/readSupplierComboList.htm',
          method: 'post',
          params: '',
          isJson: false
        }).then(res=>{
          if(res.code == 0) {
            this.supplierData = res.data
            this.readStockdetList()
          }
        })
      },
      formatter(row, column, cellValue, index) {
        if(cellValue == undefined || cellValue == null || cellValue == ""){
          return "---"
        }else{
          return cellValue
        }
      },
      formatterTime(row, column, cellValue, index) {
        if(cellValue == undefined || cellValue == null || cellValue == ""){
          return "---"
        }else{
          return this.util.formatterDate({ cellValue: cellValue })
        }
      },
      // 接口：/resource/exportStockdet.htm
      // 		materialType 类型
      // materialName 名称
      // inoutflag 出入库
      // startDate 开始时间
      // endDate 结束时间
      // batch 批号

      exportStockdet() {
        var url = "/resource/exportStockdet.htm"
        let token = sessionStorage.getItem('loginAccount')?sessionStorage.getItem('loginAccount'):undefined
        window.open(process.env.baseUrl + url + '?materialType=' + this.stockdetListParams.materialType + '&materialName=' + this.stockdetListParams.materialName + '&inoutflag=' + this.stockdetListParams.inoutflag + '&startDate=' + this.stockdetListParams.startDate + '&endDate=' + this.stockdetListParams.endDate + '&batch=' + this.stockdetListParams.batch + "&token=" + token);

      },
      cascaderChange() {
        this.stockdetListParams.materialType = this.selectedOptions2[this.selectedOptions2.length - 1]
        this.doSearch();
      },
      //	14、(1)交互名称：获取库存记录列表
      // (2)url:readStockdetList.htm
      // (3)参数：
      // (4)返回数据:
      readStockdetList() {
        if (!!this.shijianfanwei) {
          this.stockdetListParams.startDate = this.shijianfanwei[0]
          this.stockdetListParams.endDate = this.shijianfanwei[1]
        } else {
          this.stockdetListParams.startDate = ''
          this.stockdetListParams.endDate = ''
        }
        this.stockdetListParams.page = this.readQuery.page
        this.stockdetListParams.pageCount = this.readQuery.pageCount

        //		let params = {startDate:'',endDate:'',status:''}
        this.$http({
          apiUrl: 'resource/readStockdetList.htm',
          method: 'post',
          params: this.stockdetListParams,
        }).then(res => {
          if (res.code === 0) {
            this.tableData6 = res.data

            if (!res.pageinfo) {
              this.rowNumber = 0;
            } else if (res.pageinfo && !res.pageinfo.rowNumber) {
              this.rowNumber = 0;
            } else {
              this.rowNumber = res.pageinfo.rowNumber;
            }
          }
        })
      },
      emptySearch() {
        this.shijianfanwei = '';
        this.stockdetListParams.materialName = "";
        this.stockdetListParams.inoutflag = "";
        this.selectedOptions2 = [];
        this.stockdetListParams.materialType = ""
        this.stockdetListParams.batch = "";
        this.doSearch();

      },
      doSearch() {
        this.readQuery.page = 1;
        this.readStockdetList()
      },
      handleSizeChange(val) {
        this.readQuery.pageCount = val;
      },
      handleCurrentChange(val) {
        this.readQuery.page = val;
      },
      editUser: function (row) {

      },
      changeUserStatus: function (row) {
        console.log(row);
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          return {
            rowspan: row.leixingrownum,
            colspan: 1
          }
        } else if (columnIndex === 1) {
          return {
            rowspan: row.wupinnum,
            colspan: 1
          }
        } else if (columnIndex === 2) {
          if (row.baozhuangguige != '小计') {
            return {
              rowspan: row.baozhuangguigenum,
              colspan: 1
            }
          } else {
            return {
              rowspan: row.baozhuangguigenum,
              colspan: 2
            }
          }
        } else if (columnIndex === 3) {
          if (row.baozhuangguige == '小计') {
            return {
              rowspan: row.baozhuangguigenum,
              colspan: 0
            }
          }
        }
      },
      cellclassnamefunction({ row, column, rowIndex, columnIndex }) {
        if (row.baozhuangguige == '小计' && columnIndex > 1) {
          return 'xiaoJiTableCell'
        }
        return ''
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .kucunJiLu .seachTip .infoitem {
    width: calc(100%/3 - 5px)
  }

  .kucunJiLu .separaterowTable {
    height: calc(100% - 100px);
  }

  .informationItem {
    width: calc(100% - 65px);
  }

  .changepages {
    position: relative;
  }

  .total {
    position: absolute;
    right: 0;
  }
</style>
